<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>淘票票 </title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.less.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        img {
            vertical-align: middle;
            border: 0;
        }
        table {
            border-spacing: 0;
            border-collapse: collapse;
            background-color: transparent;
            border-color: grey;
        }
        .site-nav {
            z-index: 10000;
            width: 100%;
            background-color: #e4e4e4;
            border-bottom: 1px solid #eee;
            overflow: visible;
            position: fixed;
            left: 0px;
            top: 0px;
        }

        .site-nav div {
            margin: 0 auto;
            width: 1190px;
            height: 35px;
            background-color: #e4e4e4;
            z-index: 10002;
            position: relative;
            padding: 0 6px;
            line-height: 35px;
        }

        .site-nav div a {
            float: left;
            margin-right: 7px;
            font-size: 12px;
            color: #6C6C6C;
        }

        .head-wrap {
            border-bottom: 1px #e5e5e5 solid;
            background-color: #fff;
            z-index: 100;
            /* border-bottom: 1px #e5e5e5 solid; */
            overflow: hidden;
        }

        .center-wrap {
            display: block;
            width: 990px;
            min-width: 990px;
            margin: 0 auto;
            /* display: block;
            height: 72px;
            width: 990px;
            min-width: 990px;
            margin: 0 auto; */
        }

        .nav-wrap {
            float: left;
        }

        .nav-wrap .nav {
            float: left;
            padding-top: 18px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        .nav li {
            float: left;
            color: #6b6b6b;
            line-height: 42px;
            width: 74px;
            height: 44px;
        }

        .nav li a {
            color: #666;
            font-size: 18px;
            float: left;
            padding: 0 14px;
            margin-right: 10px;
        }

        .seat-step .down {
            color: #26bb7e;
            border-bottom: 2px solid #26bb7e;
        }

        .seat-step li {
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 40px;
            display: block;
            float: left;
            width: 247px;
            text-align: center;
        }

        .seat-step .current {
            color: #eb002a;
            border-bottom: 2px solid #eb002a;
        }

        .seat-step .future {
            color: #999;
            border-bottom: 2px solid #ccc;
        }
        .seat-tips {
            padding: 15px 26px 15px 20px;
            height: 58px;
            background: #fff3f3;
            broder: 1px solid #fcc;
            font-size: 14px;
            line-height: 58px;
            color: #eb002a;
            font-weight: 600;
            clear: both;
        }
        .seat-tips .time-info {
            width: 145px;
            padding-left: 50px;
            height: 58px;
            font-size: 12px;
            line-height: 28px;
            float: right;
            display: block;
            color: #999;
        }
        .seat-tips .time-info span {
            display: block;
            font-family: Verdana,Geneva,sans-serif;
            color: #eb002a;
            font-size: 24px;
            font-weight: 700;
        }
        .order-num-wrap {
            height: 32px;
            color: #999;
            line-height: 32px;
            clear: both;
        }
        .order-table table {
            text-align: center;
            width: 100%;
        }
        .order-table table td {
            border: 1px solid #ddd;
        }
        .order-table table .menu {
            height: 40px;
            line-height: 40px;
            background: #efefef;
        }
        .order-table table .menu .movie {
            width: 270px;
        }
        .order-table table .menu .changci {
            width: 240px;
        }
        .order-table table .menu .seat {
            width: 120px;
        }
        .order-table table .menu .money {
            width: 128px;
        }
        .order-table table .menu .phone {
            width: 230px;
        }
        .order-table table .info {
            color: #999;
        }
        .price-info {
            color: #aaa;
            text-align: right;
            height: 80px;
            clear: both;
            line-height: 80px;
        }
        .order-table table .info .movie-wrap {
            padding: 20px;
            overflow: hidden;
        }
        .order-table table .info .cinema-wrap {
            color: #333;
            font-size: 14px;
            padding: 20px;
            line-height: 35px;
        }
        .order-table table .info .seat-wrap {
            padding: 10px;
        }
        .order-table table .info .money-wrap {
            padding: 25px;
        }
        .order-table table .info .phone-wrap {
            line-height: 30px;
            padding: 20px;
            text-align: left;
        }
        .order-table table .info .movie-wrap img {
            float: left;
            display: block;
            margin-right: 18px;
        }

        .order-table table .info .movie-wrap ul {
            line-height: 20px;
            float: left;
            display: block;
            text-align: left;
            margin-top: 0;
            margin-bottom: 10px;
        }
        .order-table table .info .movie-wrap ul li {
            width: 120px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .order-table table .info .movie-wrap ul .movie-name {
            color: #333;
            font-weight: 700;
        }
        .order-table table .info .cinema-wrap .cinema-name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .order-table table .info .cinema-wrap .time {
            line-height: 50px;
            color: #eb002a;
        }
        .order-table table .info .seat-wrap .count {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }
        .order-table table .info .seat-wrap .seat {
            padding: 4px 0;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
        .order-table table .info .money-wrap .money {
            margin: 20px 0;
        }
        .order-table table .info .money-wrap .money .main {
            font-family: Verdana,Geneva,sans-serif;
            display: block;
            font-size: 22px;
            color: #eb002a;
        }
        .order-table table .info .phone-wrap .phone {
            color: #333;
            text-align: center;
            font-family: Verdana,Geneva,sans-serif;
            display: block;
            font-size: 16px;
            font-weight: 700;
        }

        .price-info .curr-money {
            padding: 0 10px;
        }
        .price-info .curr-money .price {
            font-size: 22px;
            font-weight: 600;
            padding: 0 5px;
        }
        .price-info .curr-money .price, .price-info .equal {
            color: #eb002a;
            font-family: Verdana,Geneva,sans-serif;
        }
        .center-wrap .submit-button {
            display: block;
            font-size: 14px;
            background-color: #eb002a;
            width: 220px;
            height: 42px;
            line-height: 42px;
            float: right;
            color: #fff;
            text-align: center;
            text-decoration:none;
        }
        #disappare {
            border: 3px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 20px;
            text-align: center;
            width: 300px;
            height: 150px;
            position: fixed;
            top: 30%;
            left: 40%;
            background-color: white;
            color: red;
        }
        .hover {
            transform: translateZ(0);
            position: relative;
            z-index: 100000;
            display: none;
            /* width: 330px;
            height: 100px; */
            float: left;
            margin-left: 170px;
        }

        .hover a {
            color: #000;
        }
    </style>
</head>

<body>

<c:import url="head.jsp" charEncoding="UTF-8" />

<div class="center-wrap">
    <div class="seat-step">
        <ul>
            <li class="down"><s></s>1.选择影片，场次</li>
            <li class="down"><s></s>2.选座，填手机号</li>
            <li class="current">3.确认订单，支付</li>
            <li class="future">4.支付成功，影院取票观影</li>
        </ul>
    </div>
    <div class="seat-tips" style="height: 80px;">
        <div class="time-info">
            剩余支付时间
            <span class="J_time">
					<s class="scd-digit-m">15</s>:<s class="scd-digit-s">00</s></span>
        </div>
        请您确认您的订单信息，并请在15分钟内完成付款，如超时系统将自动释放已选座位。
    </div>
    <div class="order-num-wrap">
        <div class="order-num" style="width: 100%;">订单号：<i>${ordervo.orderId}</i></div>
    </div>
    <div class="order-table">
        <table>
            <tbody>
            <tr class="menu">
                <td class="movie">电影</td>
                <td class="changci">场次</td>
                <td class="seat">票数/座位</td>
                <td class="money">金额小计</td>
                <td class="phone">接收电子码的电话号码</td>
            </tr>
            <tr class="info">
                <td class="movie-wrap">
                    <img width="84px" heigh="116px" src="${pageContext.request.contextPath}${ordervo.imgPath}">
                    <ul>
                        <li class="movie-name">${ordervo.FName}</li>
                        <li>版本： ${ordervo.lanType}</li>
                        <li>片长： ${ordervo.length}分钟</li>
                    </ul>
                </td>
                <td class="cinema-wrap">
                    <div class="cinema-name"></div>
                    <div class="house">${ordervo.roomName}</div>
                    <div class="time">${ordervo.PTime}</div>
                </td>
                <td class="seat-wrap">
                    <div class="count">${ordervo.seatNum}张</div>
                    <c:forEach items="${ordervo.seatStr}" var="seat">
                        <div class="seat">${seat}</div>
                    </c:forEach>
                </td>
                <td class="money-wrap">
                    <div class="money">
                        <div class="main M-main-price" data-money="104">￥${ordervo.price}</div>
                        <div class="other"></div>
                    </div>
                </td>
                <td class="phone-wrap">
                    <div class="phone">18518958504</div>
                    <div>1.短信可能会被手机软件拦截，请到该软件中查找短信</div>
                    <div>2.若要修改手机号，需要您重新下单</div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="price-info">
				<span class="curr-money">
					实付款:<span class="price M-price">￥${ordervo.price}</span>
				</span>
        </div>
        <a href="" class="submit-button">
            确认订单，立即支付
        </a>
    </div>
</div>
<div>
    <div id="disappare" style="display:none;">
        <h2 style="margin-top: 1px;">注意：</h2>
        <p style="margin-top: 24px; ">时间过期，支付失败</p>
        <button class="btn btn-primary btn1">确定</button>
    </div>
</div>
</body>

<script type="text/javascript">
    $(function () {
        var m = 14;
        var s = 59;
        timer(m, s);

    })
    $(".submit-button").click(function () {
        $.ajax({
            type: "post",
            url: "state",
            data: {
                orderId: $(".order-num i").text(),
                state:"已支付"
            },
            dataType: "json",
            success: function (data) {
                if (data == 1){
                    alert("支付成功");
                location.href = "seat?playId="+${ordervo.pid};
                // window.location.reload();
                }else {
                    alert("支付失败");
                    location.href = "seat?playId="+${ordervo.pid};
                    <%--location.href = "seat?playId="+${ordervo.pid};--%>
                }
            }
        });
    })

    function timer(m, s) {
        window.setInterval(function () {
            $('.scd-digit-m').html(m < 10 ? "0" + m : m);
            $(".scd-digit-s").html(s < 10 ? "0" + s : s);

            if (m == 0 && s == 0) {
                $('.submit-button').attr('href', '#');
                $("#disappare").show();
                $(".btn1").click(function () {
                    $("#disappare").hide();
                    ajax();
                });

                // document.getElementById("alink").click();
                return false;
            }

            s--;
            if (s < 0) {
                s = 59;
                m--;
            }
        }, 1000);

    }
    function ajax() {
        $.ajax({
            type: "post",
            url: "state",
            data: {
                orderId: $(".order-num i").text(),
                state:"已失效"
            },
            dataType: "json",
            success: function (data) {
                // window.location.reload();
                if (data == 1){
                    location.href = "seat?playId="+${ordervo.pid};
                }
            }
        });
    }
</script>

</html>
